// 实现简易 reactive ref

const reactive = (v) => {
  if (typeof v === 'object') {
    for (let key in v) {
      v[key] = reactive(v[key])
    }
    return new Proxy(v, {
      get(target, key) {
        // console.log('收集依赖')
        return target[key]
      },
      set(target, key, val) {
        target[key] = val
        console.log('视图更新')
        return true
      }
    })
  } else {
    return v
  }
}

const ref = (v) => {
  return reactive({
    value: v
  })
}

let raw1 = {
  a: 'a',
  gf: {
    b: 'b',
    f: {
      c: 'c',
      s: {
        d: 'd',
      }
    }
  }
}

let state = reactive(raw1)
state.a = 1
state.gf.b = 2
state.gf.f.c = 3
state.gf.f.s.d = 4

let raw2 = {
  a: 'a',
  gf: {
    b: 'b',
    f: {
      c: 'c',
      s: {
        d: 'd',
      }
    }
  }
}

let refv = ref(raw2)
refv.value.a = 1
refv.value.gf.b = 2
refv.value.gf.f.c = 3
refv.value.gf.f.s.d = 4
refv.value = {
  a: 1,
  gf: {
    b: 2,
    f: {
      c: 3,
      s: {
        d: 4,
      }
    }
  }
}